import { getmyinter } from '@/services';
import React, { useEffect, useState } from 'react';
import {interViewMage,ISkillInterQuery,interRecord} from '@/utils/interface'
import {NavLink} from 'umi'
import {Switch,Input,Table,Tooltip} from 'antd'
import { SearchOutlined,QuestionCircleOutlined } from '@ant-design/icons';
import styles from './myInterviewManage.less'
const soundrecordList=['无','有']
const status = ['不确定', '通过', '未通过' ];

const columns=[
    {
        title: '岗位名称',
        render:(row:interRecord)=>
        <NavLink to={`/teachers/interviewRecord?interviewId=${row.interviewId}&shield=${row.shield}&see=true`}>
            <span>{row.stationName}</span>
            </NavLink>
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },

    {
        title: '面试结果',
        render : (row:interViewMage)=> <span>{status[Number(row.status)]}</span>
    },
    {
        title: '录音文件',
        render : (row:interViewMage)=> <span>{soundrecordList[Number(row.issoundrecord)]}</span>
    },
    {
        title: '屏蔽',
        render:(row:interViewMage)=>{
            if(row.shield===1){
                return <div>
                    <Switch defaultChecked/>
                </div>
            }else{
                return <div>
                    <Switch defaultChecked={false}/>
                </div>
            }
        }
    },
]
const text = <span className={styles.rule}>
    <h6>我的面试记录规则</h6>
    <p>1.“我的面试记录" 状态包括“正常”。“被屏蔽” 。</p>
    <p>2.“正常”状态下学生可对面试记录进行查看、修改、保存操作，保存。</p>
    <p>3.“被屏蔽" 是指当学生发布的面试记录中包含虚假信息或违规操作，而被指导老师屏蔽。在该状态下学生可进行查看、修改、保存操作，但在面试记录库中不可见。</p>
    </span>;

const buttonWidth = 1200;
const myInterviewManage:React.FC=()=>{
    let [dataSource, setDataSource] = useState<interViewMage[]>([]);
    let [ searchTitle , SetSearchTitle] = useState('');
    let [title, setTitle] = useState('');
    useEffect(()=>{
        let queryParams : ISkillInterQuery = {} as  ISkillInterQuery;
        queryParams={...queryParams,searchTitle}
        getmyinter(queryParams).then(res=>{
            if(res.code==200){
                setDataSource(res.rows)
            }
        })
    },[searchTitle])
    return <div>
     <div className={styles.other}>
     <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap'}} className={styles.icon}>
     <Tooltip placement="bottom" title={text} color='white' >
        <QuestionCircleOutlined  />
      </Tooltip>
     </div>
     <Input className={styles.search}  placeholder="搜索岗位/公司名称" 
        suffix={<SearchOutlined onClick={()=>{ SetSearchTitle(title)}}/>}
         value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                if(e.keyCode === 13)
                {    
                    SetSearchTitle(title)
                }
            }} />
     </div>
        <Table rowKey="interviewId" dataSource={dataSource} columns={columns} ></Table>
   
    </div>
}
export default myInterviewManage